<script setup>
import { nextTick, ref } from 'vue'

const visible = defineModel('visible', {
    type: Boolean,
    default: false
})
const model = defineModel()

const defaultColumns = ref([])
const currentColumns = ref([])

onMounted(() => {
    nextTick(() => {
        defaultColumns.value = JSON.parse(JSON.stringify(model.value))
        currentColumns.value = JSON.parse(JSON.stringify(defaultColumns.value)).filter(item => item.type !== 'selection')
    })
})

const handleSelectionChange = val => {
    console.log(val)
}

const resetColumns = () => {
    currentColumns.value = JSON.parse(JSON.stringify(defaultColumns.value)).filter(item => item.type !== 'selection')
}
const hideAllColumns = () => {
    currentColumns.value.forEach(item => {
        item.visible = false
    })
}

const freezeAllColumns = () => {
    currentColumns.value.forEach(item => {
        item.fixed = true
    })
}

const unfreezeAllColumns = () => {
    currentColumns.value.forEach(item => {
        item.fixed = false
    })
}

const handleOk = () => {
    visible.value = false
    let selection = defaultColumns.value.find(item => item.type === 'selection')

    model.value = JSON.parse(JSON.stringify([selection, ...currentColumns.value]))
}
//是否顶级
const isChild = row => {
    return !currentColumns.value.find(item => item == row)
}
</script>
<template>
    <div>
        <el-dialog v-model="visible" title="列设置" width="50%" draggable>
            <div class="setting-btn">
                <el-button @click="resetColumns">恢复默认</el-button>
                <el-button @click="hideAllColumns">全部隐藏</el-button>
                <el-button @click="freezeAllColumns">全部冻结</el-button>
                <el-button @click="unfreezeAllColumns">全部解冻</el-button>
            </div>
            <div class="setting-content">
                <el-table :data="currentColumns" border stripe @selection-change="handleSelectionChange" row-key="label">
                    <!-- <el-table-column type="selection" width="55" align="center" /> -->
                    <el-table-column type="index" label="序号" width="50" align="center" />
                    <el-table-column prop="label" label="列名" align="center" />
                    <el-table-column prop="align" label="对齐方式" align="center">
                        <template #default="scope">
                            <el-select v-model="scope.row.align" placeholder="请选择">
                                <el-option label="左对齐" value="left" />
                                <el-option label="居中对齐" value="center" />
                                <el-option label="右对齐" value="right" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="visible" label="显示列" align="center">
                        <template #default="scope">
                            <el-switch v-model="scope.row.visible" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="fixed" label="冻结列" align="center">
                        <template #default="scope">
                            <el-switch v-if="!isChild(scope.row)" v-model="scope.row.fixed" />
                            <span v-else></span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="visible = false">取消</el-button>
                    <el-button type="primary" @click="handleOk">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.setting-btn {
    display: flex;
    justify-content: flex-start;
    padding: 10px 0;
}
:deep(.el-dialog__header) {
    height: 40px;
    display: flex;
    align-items: center;
}
:deep(.el-dialog__headerbtn) {
    height: 40px !important;
    display: flex;
    align-items: center;
}
.dialog-footer {
    display: flex;
    justify-content: flex-end;
}
</style>
